<template>
  <el-row :gutter="30" style="margin-bottom: 20px">
    <el-col :span="6">
      <el-card>
       <div class="allDataInfoBox">
         <div class="leftBox">
           <div class="leftIcon">
             <img src="/admin-img/data-center/icon1.png">
           </div>
           <div class="textBox">
             <p>今日收益</p>
             <p class="number">0</p>
           </div>
         </div>
         <img src="/admin-img/data-center/Group1.png">
       </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="allDataInfoBox">
          <div class="leftBox">
            <div class="leftIcon" style="background-color: #DAF7F0;">
              <img src="/admin-img/data-center/icon2.png">
            </div>
            <div class="textBox">
              <p>累计收益</p>
              <p class="number">0</p>
            </div>
          </div>
          <img src="/admin-img/data-center/Group2.png">
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="allDataInfoBox">
          <div class="leftBox">
            <div class="leftIcon" style="background-color: rgba(104, 99, 251,.2);">
              <img src="/admin-img/data-center/icon3.png">
            </div>
            <div class="textBox">
              <p>今日注册用户</p>
              <p class="number">0</p>
            </div>
          </div>
          <img src="/admin-img/data-center/Group3.png">
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="allDataInfoBox">
          <div class="leftBox">
            <div class="leftIcon" style="background-color: #FFF5CA;">
              <img src="/admin-img/data-center/icon4.png">
            </div>
            <div class="textBox">
              <p>累计用户</p>
              <p class="number">0</p>
            </div>
          </div>
          <img src="/admin-img/data-center/Group4.png">
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="30" style="margin-bottom: 20px">
    <el-col :span="10">
      <h4>附加包总额</h4>
      <el-card>
        <div class="acount_box">
          <div class="progress_box">
            <div class="label">域名检测总点数</div>
            <el-progress :percentage="50">域名检测总点数</el-progress>
          </div>
          <div class="progress_box">
            <div class="label">域名监控总点数</div>
            <el-progress :percentage="100"></el-progress>
          </div>
          <div class="progress_box">
            <div class="label">电话通知总点数</div>
            <el-progress :percentage="100" status="success"></el-progress>
          </div>
          <div class="progress_box">
            <div class="label">短信通知总点数</div>
            <el-progress :percentage="100" status="success"></el-progress>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="14">
      <h4>更新日志</h4>
      <el-card>
        <div class="noticeBlock">
          <div v-for="n in 4">
            <span class="notice_item">百度安全下线通知</span>
            <el-divider v-if="n != 4"></el-divider>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-card class="line_art_box">
    <template #header>
      <div class="line_art_title">
        <h4>流量趋势</h4>
        <div>
          <el-radio-group v-model="line_type">
            <el-radio label="today">今日</el-radio>
            <el-radio label="yesterday">昨日</el-radio>
            <el-radio label="week">最近7天</el-radio>
            <el-radio label="month">最近30天</el-radio>
            <el-radio label="custom">自定义时间</el-radio>
          </el-radio-group>
        </div>
      </div>
    </template>
    <div id="line_art_echarts">

    </div>
  </el-card>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue'

export default {
  name: 'index',
  setup(){
    let { proxy } = getCurrentInstance()
    const state = reactive({
      line_type:'month',
    })
    let echartsOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['总访问次数', '总访问人数'],
      },
      xAxis: {
        type: 'category',
        data: ['2020-08-10', '2020-08-11', '2020-08-12', '2020-08-13', '2020-08-14', '2020-08-15', '2020-08-16']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name:'总访问次数',
        data: [0, 0, 0, 934, 500, 1330, 1320],
        type: 'line',
        smooth: true
      },{
        name:'总访问人数',
        data: [0, 0, 0, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }]
    };

    onMounted(()=>{
      let line_art = proxy.$echarts.init(document.getElementById('line_art_echarts'))
      line_art.setOption(echartsOption)
    })

    return{
      ...toRefs(state)
    }
  }
}
</script>

<style lang="less" scoped>
.noticeBlock{
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .notice_item{
    font-size: 12px;
    color: #666;
  }
  .el-divider{
    margin: 8px 0;
  }
}
.allDataInfoBox{
  display: flex;
  justify-content: space-between;
  img{
    width: 50px;
    height: 50px;
  }
  .leftBox{
    display: flex;
    .textBox{
      display: flex;
      height: 50px;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;
      p{
        color: #97A0C3;
        font-size: 14px;
        margin: 0;
      }
      .number{
        font-size: 20px;
        font-weight: 600;
        color: #000000;
      }
    }
    .leftIcon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background-color: #D5EAFF;
      border-radius: 5px;
      img{
        width: 24px;
        height: 24px;
      }
    }
  }
}
.acount_box{
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .progress_box{
    display: flex;
    .label{
      color: #666;
      font-size: 12px;
      margin-right: 10px;
    }
    .el-progress{
      flex: 1;
    }
  }
}
.line_art_box{
  padding-bottom: 20px;
  .line_art_title{
    display: flex;
    justify-content: space-between;
    h4{
      margin: 0;
    }
  }
  #line_art_echarts{
    width: 100%;
    height: 400px;
  }
}
</style>
